class KVue {
	constructor(options) {
		this.$options = options
		this.$data = options.data;

		this.observe(this.$data)

		
		new Watcher(this, 'test')
		
	}

	observe(data) {
		if (!data || typeof data !== 'object') return;

		Object.keys(data).forEach(key => {
			this.defineReactive(data, key, data[key])

			this.proxyData(key)


		})
	}

	defineReactive(data, key, val) {
		// 递归
		this.observe(val)

		const dep = new Dep();

		Object.defineProperty(data, key, {
			get() {
				Dep.target && dep.addDeps(Dep.target)
				return val;
			},
			set(newVal) {
				if (val === newVal) return;
				val = newVal;
				dep.notify()
			}
		})
	}

	proxyData(key) {
		Object.defineProperty(this, key, {
			get() {
				return this.$data[key]
			},
			set(newVal) {
				this.$data[key] = newVal
			}
		})
	}


}


class Dep {
	constructor() {
		this.deps = []
	}

	addDeps(watcher) {
		this.deps.push(watcher)
	}

	notify() {
		console.log(this.deps.length, this.deps)
		this.deps.forEach(item => item.update())
	}

}

class Watcher {
	constructor(vm, key) {
		Dep.target = this;
		this.vm = vm;
		this.key = key;
	}

	update() {
		console.log(`${this.key}属性更新了`)
	}
}